<template>
  <div class="wrapper">
    <div style="margin: 150px auto;width:380px;height: 430px" >
        <h1 style="text-align:center;font-size:26px;margin: 20px 0 15px;">登录</h1>
      <el-form :model="user" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input  size="45px" style="border-radius: 20px" v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input  size="45px" style="margin-top: 5px;" show-password v-model="user.password" placeholder="请输入密码" ></el-input>
        </el-form-item>
        <el-button type="primary" size="big" round style="margin-top: 20px;width:380px;height: 50px" @click="login">登录</el-button>
         <span @click="$router.push('/register')">点击注册</span>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      user: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.request.post("/user/login",this.user).then(res=>{
            if(res.code === '200'){
              console.log(res.data)
              localStorage.setItem("user",JSON.stringify(res.data));
              this.$router.push( '/admin/'+res.data.id+'/'+1)
              this.$message.success("登录成功")
            }else{
              this.$message.error(res.data)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .wrapper {
    height: 100vh;
    overflow: hidden;
  }
</style>